<style>    
    .fa-fw{
        margin-left: 20px;
    }
    .basicinfo {
        margin: 15px 0;
    }

    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }

    .basicinfo .row > div {
        margin: 5px 0;
    }

    .liouter {
        width: 110%;
        display: inline-block;
        padding: 8px 0;
        border-radius: 4px;
        border: 1px solid rgb(211, 220, 235);
    }

    .ptouter {
        float: left;
    }

    .mul-small-outer {
        float: left;
        margin-left: 8px;
    }

    .pt-img {
        float: left;
        margin-left: 8px;
    }

    .split {
        float: left;
        height: 20px;
        border-left: 1px solid #ddd;
        margin-top: 7px;
        margin-left: 8px;
    }
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
      font-weight: bold;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <!-- 菜单 -->
        <!-- <div class="col-md-3">
            {include file="common/sidenav" /}
        </div> -->
        <div class="col-md-12">
            <div class="panel-default">
                <div class="panel-body">
                    <h2 class="page-header">
                        <i class="fa fa-key fa-fw"></i> 关键应用
                    </h2>                    
                    <!-- <div class="panel panel-default panel-intro"> -->
                        <input type="hidden" id="app_id" name="app_id" value="<?php echo $info[0]['appid']?>">
                        <div class="panel-heading">
                            <ul class="nav nav-tabs" id="app_tab_ul">
                                <!-- <li class="active"><a href="#one" data-toggle="tab">百度搜索</a></li> -->
                                <!-- <li><a href="#two" data-toggle="tab">WWW</a></li> -->
                                {volist name="info" id="val"}
                                    {if condition="$key eq 0"}
                                        <li class="active">
                                            <a href="#show-{$key}" key="{$key}" class="app-tab" appid="{$val.appid}" appname="{$val.appname}" data-toggle="tab">{$val.appname}</a>
                                        </li>
                                    {else}
                                        <li>
                                            <a href="#show-{$key}" key="{$key}" class="app-tab" appid="{$val.appid}" appname="{$val.appname}" data-toggle="tab">{$val.appname}</a>
                                        </li>
                                    {/if}
                                {/volist}
                            </ul>
                        </div>
                        <div class="panel-body">
                            <div id="myTabContent" class="tab-content">
                                {volist name="info" id="val"}
                                    {if condition="$key eq 0"}
                                        <div class="tab-pane fade active in" id="show-{$key}">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="pt1" class="col-md-3 ptouter" style="max-width: 240px;">
                                                        <div class="liouter cl_pt1 flow-display-{$key}">
                                                            <div class="pt-img">
                                                                <a href="javascript:;"><img src="/assets/img/inout.gif" title="流量速率"></a>
                                                            </div>
                                                            <div style="float:left; margin-left: 8px;margin-top: 8px;">
                                                                <div class="title2">流量</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div style="float:left; margin-left: 8px">
                                                                <div class="title2">上行</div>
                                                                <div class="cont" id="flow-up-{$key}">0</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">下行</div>
                                                                <div class="cont" id="flow-down-{$key}">0</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- <div id="pt2" class="col-md-2 ptouter mw">
                                                        <div class="liouter cl_pt1">
                                                            <div class="pt-img">
                                                                <a href="javascript:;"><img src="/assets/img/inout.gif" title="速度"></a>
                                                            </div>
                                                            <div style="float:left; margin-left: 8px;margin-top: 8px;">
                                                                <div class="title2">速度</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">上行</div>
                                                                <div class="cont" id="speed-up-{$key}">0</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">下行</div>
                                                                <div class="cont" id="speed-down-{$key}">0</div>
                                                            </div>
                                                        </div>
                                                    </div>  -->  
                                                </div>
                                            </div>
                                            <div class="row">                    
                                                <div class="col-md-12 col-sm-9 col-xs-10">
                                                    <!-- Content -->
                                                    <div class="ui-content">
                                                        <!-- Success -->
                                                        <div class="basicinfo" style="border: 0px solid red;">
                                                            <!-- 24小时流量趋势 -->
                                                            <div class="row">
                                                               <div class="col-md-12">
                                                                    <!-- 24小时流量趋势 -->
                                                                    <center>
                                                                        <div id="flow-hour-{$key}" style="height:360px;">
                                                                        </div>
                                                                    </center>
                                                               </div> 
                                                            </div>
                                                            <hr>
                                                            <!-- 24小时连接趋势 -->
                                                            <div class="row">
                                                               <div class="col-md-12">
                                                                    <!-- 24小时连接趋势 -->
                                                                    <center>
                                                                        <div id="connect-hour-{$key}" style="height:360px;">
                                                                        </div>
                                                                    </center>
                                                               </div> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>  
                                        </div>
                                    {else}
                                        <div class="tab-pane fade" id="show-{$key}">
                                            <!-- <div class="row">
                                                <div class="col-xs-12">
                                                    11222
                                                </div>
                                            </div> -->
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="pt1" class="col-md-3 ptouter" style="max-width: 240px;">
                                                        <div class="liouter cl_pt1 flow-display-{$key}">
                                                            <div class="pt-img">
                                                                <a href="javascript:;"><img src="/assets/img/inout.gif" title="流量速率"></a>
                                                            </div>
                                                            <div style="float:left; margin-left: 8px;margin-top: 8px;">
                                                                <div class="title2">流量</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div style="float:left; margin-left: 8px">
                                                                <div class="title2">上行</div>
                                                                <div class="cont" id="flow-up-{$key}">0</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">下行</div>
                                                                <div class="cont" id="flow-down-{$key}">0</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- <div id="pt2" class="col-md-2 ptouter mw">
                                                        <div class="liouter cl_pt1">
                                                            <div class="pt-img">
                                                                <a href="javascript:;"><img src="/assets/img/inout.gif" title="速度"></a>
                                                            </div>
                                                            <div style="float:left; margin-left: 8px;margin-top: 8px;">
                                                                <div class="title2">速度</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">上行</div>
                                                                <div class="cont" id="speed-up-{$key}">0</div>
                                                            </div>
                                                            <div class="split"></div>
                                                            <div class="mul-small-outer">
                                                                <div class="title2">下行</div>
                                                                <div class="cont" id="speed-down-{$key}">0</div>
                                                            </div>
                                                        </div>
                                                    </div>   --> 
                                                </div>
                                            </div>
                                            <div class="row">                    
                                                <div class="col-md-12 col-sm-9 col-xs-10">
                                                    <!-- Content -->
                                                    <div class="ui-content">
                                                        <!-- Success -->
                                                        <div class="basicinfo" style="border: 0px solid red;">
                                                            <!-- 24小时流量趋势 -->
                                                            <div class="row">
                                                               <div class="col-md-12">
                                                                    <!-- 24小时流量趋势 -->
                                                                    <center>
                                                                        <div id="flow-hour-{$key}" style="height:360px;">
                                                                        </div>
                                                                    </center>
                                                               </div> 
                                                            </div>
                                                            <hr>
                                                            <!-- 24小时连接趋势 -->
                                                            <div class="row">
                                                               <div class="col-md-12">
                                                                    <!-- 24小时连接趋势 -->
                                                                    <center>
                                                                        <div id="connect-hour-{$key}" style="height:360px;">
                                                                        </div>
                                                                    </center>
                                                               </div> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {/if}
                                {/volist}
                            </div>
                        </div>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入highchart -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="/highcharts/code/highcharts.js"></script>
<script src="/highcharts/code/modules/exporting.js"></script>
<script src="/highcharts/code/modules/export-data.js"></script> -->

<script type="text/javascript">
    

    // var chart = null;
    // $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
    //     chart = Highcharts.chart('flow_down', {
    //         chart: {
    //             zoomType: 'x'
    //         },
    //         title: {
    //             text: '美元兑欧元汇率走势图'
    //         },
    //         subtitle: {
    //             text: document.ontouchstart === undefined ?
    //             '鼠标拖动可以进行缩放' : '手势操作进行缩放'
    //         },
    //         xAxis: {
    //             type: 'datetime',
    //             dateTimeLabelFormats: {
    //                 millisecond: '%H:%M:%S.%L',
    //                 second: '%H:%M:%S',
    //                 minute: '%H:%M',
    //                 hour: '%H:%M',
    //                 day: '%m-%d',
    //                 week: '%m-%d',
    //                 month: '%Y-%m',
    //                 year: '%Y'
    //             }
    //         },
    //         tooltip: {
    //             dateTimeLabelFormats: {
    //                 millisecond: '%H:%M:%S.%L',
    //                 second: '%H:%M:%S',
    //                 minute: '%H:%M',
    //                 hour: '%H:%M',
    //                 day: '%Y-%m-%d',
    //                 week: '%m-%d',
    //                 month: '%Y-%m',
    //                 year: '%Y'
    //             }
    //         },
    //         yAxis: {
    //             title: {
    //                 text: '汇率'
    //             }
    //         },
    //         legend: {
    //             enabled: false
    //         },
    //         plotOptions: {
    //             area: {
    //                 fillColor: {
    //                     linearGradient: {
    //                         x1: 0,
    //                         y1: 0,
    //                         x2: 0,
    //                         y2: 1
    //                     },
    //                     stops: [
    //                         [0, Highcharts.getOptions().colors[0]],
    //                         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
    //                     ]
    //                 },
    //                 marker: {
    //                     radius: 2
    //                 },
    //                 lineWidth: 1,
    //                 states: {
    //                     hover: {
    //                         lineWidth: 1
    //                     }
    //                 },
    //                 threshold: null
    //             }
    //         },
    //         series: [{
    //             type: 'area',
    //             name: '美元兑欧元',
    //             data: data
    //         }]
    //     });
    // });












    // $("#flow-up-0").html();
    // $("#flow-down-0").html();
    // alert(1);
    // http://172.16.3.8:5090/index/app/flow?type=flow&appid=baidu
    // http://172.16.3.8:5090/index/app/flow?type=link&appid=baidu
    // var chart = null;
    // $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
    //     chart = Highcharts.chart('flow-hour-0', {
    //         chart: {
    //             zoomType: 'x'
    //         },
    //         title: {
    //             text: '24小时流量趋势'
    //         },
    //         subtitle: {
    //             text: document.ontouchstart === undefined ?
    //             '鼠标拖动可以进行缩放' : '手势操作进行缩放'
    //         },
    //         xAxis: {
    //             type: 'datetime',
    //             dateTimeLabelFormats: {
    //                 millisecond: '%H:%M:%S.%L',
    //                 second: '%H:%M:%S',
    //                 minute: '%H:%M',
    //                 hour: '%H:%M',
    //                 day: '%m-%d',
    //                 week: '%m-%d',
    //                 month: '%Y-%m',
    //                 year: '%Y'
    //             }
    //         },
    //         tooltip: {
    //             dateTimeLabelFormats: {
    //                 millisecond: '%H:%M:%S.%L',
    //                 second: '%H:%M:%S',
    //                 minute: '%H:%M',
    //                 hour: '%H:%M',
    //                 day: '%Y-%m-%d',
    //                 week: '%m-%d',
    //                 month: '%Y-%m',
    //                 year: '%Y'
    //             }
    //         },
    //         yAxis: {
    //             title: {
    //                 text: 'bits/s'
    //             }
    //         },
    //         legend: {
    //             enabled: false
    //         },
    //         plotOptions: {
    //             area: {
    //                 fillColor: {
    //                     linearGradient: {
    //                         x1: 0,
    //                         y1: 0,
    //                         x2: 0,
    //                         y2: 1
    //                     },
    //                     stops: [
    //                         [0, Highcharts.getOptions().colors[0]],
    //                         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
    //                     ]
    //                 },
    //                 marker: {
    //                     radius: 2
    //                 },
    //                 lineWidth: 1,
    //                 states: {
    //                     hover: {
    //                         lineWidth: 1
    //                     }
    //                 },
    //                 threshold: null
    //             }
    //         },
    //         series: [{
    //             type: 'area',
    //             name: '美元兑欧元',
    //             data: data
    //         }]
    //     });
    // });
</script>